<template>
  <div>
    <div class="main">
      <div class="tab-wrapper">
        <div class="tab-item zero">
          <div class="l-img">
            <div class="l-border">
              <el-image
                style="width: 48px; height: 48px"
                :src="countImg"
              ></el-image>
            </div>
          </div>
          <div class="r-text">
            <div class="tab">{{ countItem.zzlCount }}</div>
            <div class="title">族总量</div>
          </div>
        </div>
        <div class="tab-item one">
          <div class="l-img">
            <div class="l-border">
              <el-image
                style="width: 48px; height: 48px"
                :src="lookImg"
              ></el-image>
            </div>
          </div>
          <div class="r-text">
            <div class="tab">{{ countItem.lookCount }}</div>
            <div class="title">查看量</div>
          </div>
        </div>
        <div class="tab-item two">
          <div class="l-img">
            <div class="l-border">
              <el-image
                style="width: 48px; height: 48px"
                :src="uploadImg"
              ></el-image>
            </div>
          </div>
          <div class="r-text">
            <div class="tab">{{ countItem.uploadCount }}</div>
            <div class="title">上传量</div>
          </div>
        </div>
        <div class="tab-item three">
          <div class="l-img">
            <div class="l-border">
              <el-image
                style="width: 48px; height: 48px"
                :src="downloadImg"
              ></el-image>
            </div>
          </div>
          <div class="r-text">
            <div class="tab">{{ countItem.downloadCount }}</div>
            <div class="title">下载量</div>
          </div>
        </div>
        <div class="tab-item four">
          <div class="l-img">
            <div class="l-border">
              <el-image
                style="width: 48px; height: 48px"
                :src="scImg"
              ></el-image>
            </div>
          </div>
          <div class="r-text">
            <div class="tab">{{ countItem.collectCount }}</div>
            <div class="title">收藏量</div>
          </div>
        </div>
      </div>
      <div class="list">
        <div class="list-title">
          <div class="list-title-left">
            <el-image style="width: 24px; height: 24px" :src="yjImg"></el-image>
            <label>高频元件</label>
            <!-- <div class="searchContent">
              <el-input
                v-model="versionOrName"
                placeholder="请输入版本或名称"
                size="mini"
                style="width: 150px; margin-right: 10px"
                clearable
              ></el-input>
              <custom-button
                type="search"
                @searchClick="searchClick"
              ></custom-button>
            </div> -->
          </div>
          <div class="list-title-right">
            <el-button-group>
              <el-button
                :type="btnSelect == 3 ? 'primary' : 'default'"
                size="small"
                @click="btnClick(3)"
                >下载量</el-button
              >
              <el-button
                :type="btnSelect == 2 ? 'primary' : 'default'"
                size="small"
                @click="btnClick(2)"
                >收藏量</el-button
              >
              <el-button
                :type="btnSelect == 1 ? 'primary' : 'default'"
                size="small"
                @click="btnClick(1)"
                >查看量</el-button
              >
            </el-button-group>
          </div>
        </div>
      </div>
      <div class="gjw-list">
        <div v-if="listData.length == 0" class="noData">暂无数据</div>
        <div class="gjw-list-list" v-else>
          <div class="gjw-list-item">
            <div
              class="item"
              v-for="(item, index) in listData"
              v-bind:key="index"
              @mouseover="itemOver(item)"
              @mouseleave="itemLevel"
            >
              <div class="item-img" @click="showDetail(item)">
                <el-image style="height: 120px" :src="item.imgSrc"></el-image>
              </div>
              <div class="item-button" v-show="!item.show">&nbsp;</div>
              <div class="item-button" v-show="item.show">
                <el-button
                  type="primary"
                  icon="el-icon-download"
                  size="small"
                  @click="downItem(item)"
                  >下载</el-button
                >
                <el-button
                  type="default"
                  icon="el-icon-star-off"
                  size="small"
                  v-if="item.isSc == 0"
                  @click="itemSc(item)"
                  >收藏</el-button
                >
                <el-button
                  type="default"
                  icon="el-icon-star-on"
                  size="small"
                  v-if="item.isSc == 1"
                  @click="itemSc(item)"
                  >取消收藏</el-button
                >
              </div>
              <div class="item-title">
                <el-tooltip :content="item.name" placement="top">
                  <label>{{ item.name }}</label>
                </el-tooltip>
              </div>
              <el-row class="item-row">
                <el-col :span="24" style="text-align: left; padding-left: 10px"
                  >格式：{{ item.gs }}</el-col
                >
                <!-- <el-col
											:span="12"
											style="text-align: right; padding-right: 10px"
											>版本：{{ item.bb }}</el-col
										> -->
              </el-row>
            </div>
          </div>
        </div>
        <!-- <div class="gjw-list-page">
          <el-pagination
            background
            :layout="
              hasIsSizes
                ? 'prev, pager, next,total,sizes'
                : 'prev, pager, next,total'
            "
            :total="count"
            :page-size="size"
            :current-page="current"
            @current-change="pageChange"
            :page-sizes="[20, 50, 100, 200, 500]"
            @size-change="handleSizeChange"
          >
            >
          </el-pagination>
        </div> -->
      </div>
    </div>

    <div v-if="dialogShow">
      <custom-dialog
        :title="dialogTitle"
        size="large"
        @dialogClose="dialogClose"
      >
        <div class="detail-dialog">
          <div class="detail-dialog-title">
            <el-row>
              <el-col :span="16">
                <!-- <div class="detail-name" style="color: brown">
                  {{ tableName }}
                </div> -->
                <div class="detail-name">{{ curItem.name }}</div>
                <div class="detail-update">
                  上传时间：{{
                    curItem.updateTime
                  }}&nbsp;&nbsp;&nbsp;&nbsp;上传人：{{ curItem.username }}
                </div>
              </el-col>
              <el-col :span="8" style="text-align: right">
                <!-- <el-button
                  type="primary"
                  icon="el-icon-s-tools"
                  size="small"
                  @click="bindBq(curItem)"
                  >标签绑定</el-button
                > -->
                <el-button
                  type="primary"
                  icon="el-icon-download"
                  size="small"
                  @click="downItem(curItem)"
                  >下载</el-button
                >
                <el-button
                  type="default"
                  icon="el-icon-star-off"
                  size="small"
                  v-if="curItem.isSc == 0"
                  @click="itemSc(curItem)"
                  >收藏</el-button
                >
                <el-button
                  type="default"
                  icon="el-icon-star-on"
                  size="small"
                  v-if="curItem.isSc == 1"
                  @click="itemSc(curItem)"
                  >取消收藏</el-button
                >
              </el-col>
            </el-row>

            <el-row style="margin: 20px 0">
              <el-col :span="16">
                <div class="detail-wrapper">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="缩略图" name="first">
                      <div class="img-list">
                        <div class="img-list-left-arrow" @click="imgLeftClick">
                          <i class="el-icon el-icon-arrow-left"></i>
                        </div>
                        <div class="img-list-left-img">
                          <el-image
                            style="height: 360px; margin-top: 0px"
                            :src="imgList[imgIndex]"
                          ></el-image>
                        </div>
                        <div
                          class="img-list-right-arrow"
                          @click="imgRightClick"
                        >
                          <i class="el-icon el-icon-arrow-right"></i>
                        </div>
                      </div>
                      <div class="img-list-li">
                        <ul>
                          <li
                            v-for="(item, index) in imgList"
                            v-bind:key="index"
                            :class="imgIndex == index ? 'hover' : ''"
                          ></li>
                        </ul>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="3D" name="second">
                      <threeD :curItem="curItem"></threeD>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-col>
              <el-col :span="8" style="float: right">
                <div class="detail-wrapper">
                  <div class="detail-wrapper-type">
                    <label>类型：</label>
                    <el-select
                      v-model="typeValue"
                      placeholder="请选择类型"
                      size="small"
                      style="width: 290px"
                      @change="typeChange"
                    >
                      <el-option
                        v-for="(item, index) in propertys"
                        v-bind:key="index"
                        :label="item.FamilyTypeName"
                        :value="index"
                      >
                      </el-option>
                    </el-select>
                  </div>

                  <div class="collapseType">
                    <!-- <el-collapse v-model="activeCollapse">
                      <el-collapse-item
                        :title="item.FamilyTypeName"
                        :name="index"
                        class="typeItem"
                        v-for="(item, index) in propertys"
                        v-bind:key="index"
                      >
                        <div
                          class="collapseType-item"
                          v-for="(child, cindex) in item.FamilyParameters"
                          v-bind:key="cindex"
                        >
                          <div class="collapseType-item-left">
                            {{ child.ParamKey }}：
                          </div>
                          <div class="collapseType-item-right">
                            {{ child.ParamVal }}
                          </div>
                        </div>
                      </el-collapse-item>
                    </el-collapse> -->
                    <div
                      class="collapseType-item"
                      v-for="(child, cindex) in propertysValue"
                      v-bind:key="cindex"
                    >
                      <div class="collapseType-item-left">
                        {{ child.ParamKey }}：
                      </div>
                      <div class="collapseType-item-right">
                        {{ child.ParamVal }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </custom-dialog>
    </div>

    <div v-if="showPwdJudge">
      <pwdJudge @close="showPwdJudge = false" @success="startDown"></pwdJudge>
    </div>
  </div>
</template>

<script>
import Download from "@/assets/images/index/download.png";
import Look from "@/assets/images/index/look.png";
import Count from "@/assets/images/index/count.png";
import SC from "@/assets/images/index/sc.png";
import Upload from "@/assets/images/index/upload.png";
import YJ from "@/assets/images/index/yj.png";
import SMJ from "@/assets/images/smj/smj.jpg";
import customDialog from "@/components/customComponents/customDialog";
// import customButton from "@/components/customComponents/customForm/customButton";
import { AjaxCommon, ImageAddress } from "@/libs/apiCommon";
import { PopupCommon } from "@/libs/popupCommon";
import { SessionCommon } from "@/libs/sessionCommon";
import threeD from "./threeD";
import pwdJudge from "@/components/customComponents/pwdJudge";
export default {
  components: {
    // customButton,
    customDialog,
    threeD,
    pwdJudge,
  },
  data() {
    return {
      showPwdJudge: false,
      currentSelectDown: {}, // 存储当前点击的那行数据
      inter: null,
      typeValue: "",
      typeOptions: [
        {
          value: "1",
          label: "标准1",
        },
        {
          value: "2",
          label: "标准2",
        },
      ],
      activeCollapse: ["1"],
      imgIndex: 0,
      imgList: [],
      activeName: "first",
      dialogTitle: "元件详情",
      dialogShow: false,
      hasIsSizes: true,
      lookImg: Look,
      countImg: Count,
      uploadImg: Upload,
      downloadImg: Download,
      scImg: SC,
      yjImg: YJ,
      btnSelect: 3,
      versionOrName: "",
      smjImg: SMJ,

      count: 2,
      size: 20,
      current: 1,
      listData: [
        // {
        //   id: 1,
        //   imgSrc: SMJ,
        //   name: "笔记本电脑1笔记本电脑1笔记本电脑1笔记本电脑1笔",
        //   downloadUrl: "https://www.baidu.com",
        //   // 是否收藏，1收藏了，0未收藏
        //   isSc: 1,
        //   gs: "rfa",
        //   bb: "version1",
        //   // 显示按钮
        //   show: false,
        //   username: "张三",
        //   updateTime: "2024-12-12 11:11:11",
        // },
        // {
        //   id: 2,
        //   imgSrc: SMJ2,
        //   name: "笔记本电脑2",
        //   downloadUrl: "https://www.baidu.com",
        //   // 是否收藏，1收藏了，0未收藏
        //   isSc: 0,
        //   gs: "rfa1",
        //   bb: "version2",
        //   show: false,
        //   username: "李四",
        //   updateTime: "2024-12-12 12:12:12",
        // },
      ],
      curItem: null,
      countItem: {
        lookCount: 0,
        uploadCount: 0,
        downloadCount: 0,
        collectCount: 0,
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getAllCount();
      this.initTable();
    });
  },
  destroyed() {},
  methods: {
    typeChange(e) {
      var item = this.propertys[e];
      console.log(e, item, "e.......");
      this.propertysValue = item.FamilyParameters;
    },
    stringToArrayBuffer(str) {
      console.log(str, "str....................");
      var buf = new ArrayBuffer(str.length);
      var bufView = new Uint8Array(buf);
      for (var i = 0, strLen = str.length; i < strLen; i++) {
        bufView[i] = str.charCodeAt(i);
      }
      return buf;
    },
    startDown() {
      this.showPwdJudge = false;
      const item = this.currentSelectDown;
      this.oprRecord(3, item);
      const that = this;
      // let self = this
      AjaxCommon(
        "/api/familyresouce/downloadfile/" + item.Id,
        "getBlob",
        null
      ).then((res) => {
        if (res?.status == 200) {
          // var data = self.stringToArrayBuffer(res.data)
          var blob = new Blob([res.data]);
          const href = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.download = item.FamilyName;
          link.href = href;
          link.click();
          try {
            document.body.removeChild(link);
          } catch (error) {
            console.log(error.message);
          }
          URL.revokeObjectURL(href); // 释放内存
          that.getAllCount();
        } else {
          PopupCommon.notify("error", res?.data?.msg ?? "资源未找到");
        }
      });
    },
    downItem(item) {
      this.currentSelectDown = item;
      this.showPwdJudge = true;
    },
    getAllCount() {
      const that = this;
      AjaxCommon(
        "/api/FamilyFileOprateController/GetHomePageInfo",
        "get",
        null
      ).then((res) => {
        // 族总量、查看量、下载量、收藏量、上传量
        const data = res.data.response;
        console.log(res, data, "dss.....");
        that.countItem = {
          // 查看量
          lookCount: data[1],
          // 上传量
          uploadCount: data[4],
          // 下载量
          downloadCount: data[2],
          // 收藏量
          collectCount: data[3],
          // 族总量
          zzlCount: data[0],
        };
      });

      // // /api/FamilyFileOprateController  1：查看 2：收藏 3：下载
      // Promise.all([
      //   AjaxCommon(`/api/FamilyFileOprateController?oprateType=1`, "get", null),
      //   AjaxCommon(`/api/familyresouce/GetUploadCount`, "get", null),
      //   AjaxCommon(`/api/FamilyFileOprateController?oprateType=3`, "get", null),
      //   AjaxCommon(`/api/FamilyFileOprateController?oprateType=2`, "get", null),
      //   AjaxCommon(`/api/familyresouce/GetCount`, "get", null),
      // ]).then((res) => {
      //   console.log(res, "res............");
      //   this.countItem = {
      //     lookCount: res[0].data.response,
      //     uploadCount: res[1].data.response,
      //     downloadCount: res[2].data.response,
      //     collectCount: res[3].data.response,
      //     zzlCount: res[4].data.response,
      //   };
      // });
    },
    imgLeftClick() {
      if (this.imgIndex != 0) {
        this.imgIndex--;
      } else {
        this.imgIndex = this.imgList.length - 1;
      }
      console.log(this.imgIndex, this.imgList);
    },
    imgRightClick() {
      if (this.imgIndex != this.imgList.length - 1) {
        this.imgIndex++;
      } else {
        this.imgIndex = 0;
      }
    },
    /* 查看:1收藏:2下载:3 */
    oprRecord(type, item) {
      var userId = SessionCommon.getCurUserId();
      var params = {
        UserID: userId,
        FileID: item.Id,
        OprateType: type,
        OprateTime: "",
      };
      console.log(params);
      AjaxCommon("/api/FamilyFileOprateController", "putForm", params).then(
        (res) => {
          console.log(res, params);
        }
      );
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.activeName = tab.$props.name;
    },
    dialogClose() {
      clearInterval(this.inter);
      this.dialogShow = false;
    },
    btnClick(index) {
      this.btnSelect = index;
      this.initTable();
    },
    // 调用收藏
    async initSc() {
      const res = await AjaxCommon(`/api/favorite/getfavoritefamilys`, "get");
      var data = res.data.response;
      if (data && data.length > 0) {
        return data;
      }
      return [];
    },
    async initTable() {
      var index = this.btnSelect;
      const scList = await this.initSc();
      var imageAddress = ImageAddress;
      console.log(index);
      var params = `?Type=${index}&count=100`;
      AjaxCommon(
        "/api/FamilyFileOprateController/GetFamilyResouceByOprate" + params,
        "get",
        null
      ).then((res) => {
        console.log(res, params);
        var data = res.data.response;
        if (data && data.length > 0) {
          self.imgList = [];
          self.imgIndex = 0;
          data.map((t) => {
            t.id = t.Id;
            t.imgSrc = imageAddress + "/" + t.PreImage;
            t.name = t.FamilyName;
            t.show = false;
            t.username = t.UploadUser;
            t.updateTime = t.UploadTime;
            t.isSc =
              scList.length > 0 &&
              scList.filter((cc) => cc.Id == t.Id).length > 0
                ? 1
                : 0;
            t.gs = "rfa";
            t.bb = "版本1";

            var imgList = t.MulViewImages;
            var newImgList = [];
            if (imgList) {
              imgList = JSON.parse(imgList);
              if (imgList && imgList.length > 0) {
                imgList.map((b) => {
                  b = imageAddress + "/" + b;
                  newImgList.push(b);
                  return b;
                });
              }
              console.log(imgList, "imgList.....");
              t.MulViewImages = newImgList;
            } else {
              t.MulViewImages = [];
            }
            return t;
          });
        }
        this.listData = data;
      });
    },
    searchClick() {
      console.log(this.versionOrName);
    },
    itemOver(item) {
      this.listData.map((t) => {
        t.show = t.id == item.id;
      });
    },
    itemLevel() {
      this.listData.map((t) => {
        t.show = false;
      });
    },
    itemSc(item) {
      let that = this;
      if (item.isSc == 1) {
        item.isSc = 0;
      } else {
        item.isSc = 1;
        this.oprRecord(2, item);
      }
      AjaxCommon(
        "/api/favorite/favoritefamily?id=" + item.Id,
        "put",
        null
      ).then((res) => {
        if (res.data.status == 200) {
          PopupCommon.notify("success", "操作成功");
          that.getAllCount();
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    showDetail(item) {
      this.oprRecord(1, item);
      this.curItem = item;
      try {
        this.propertys = JSON.parse(item.Propertys);
        this.propertysValue = this.propertys[0].FamilyParameters;
      } catch (error) {
        this.propertys = [];
        this.propertysValue = [];
      }
      this.imgIndex = 0;
      this.typeValue = 0;
      this.imgList = item.MulViewImages;
      this.initScroll();
      this.dialogShow = true;
    },
    initScroll() {
      setTimeout(() => {
        this.inter = setInterval(() => {
          this.imgRightClick();
        }, 5000);
      }, 2000);
    },
    // 页码点击事件,p当前页
    pageChange(p) {
      // this.$emit("pageChange", p)
      console.log(p);
    },
    handleSizeChange(e) {
      // this.$emit("handleSizeChange", e)
      console.log(e);
    },
  },
};
</script>

<style scoped>
.main {
  margin: 10px 0;
}
.img-list {
  height: 360px;
  width: 100%;
  position: relative;
  text-align: center;
}
.img-list-left-arrow {
  font-size: 12px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f5f5fa;
  top: 160px;
  left: 0;
  z-index: 1;
  cursor: pointer;
}
.img-list-left-arrow i,
.img-list-right-arrow i {
  font-size: 26px;
  margin-top: 7px;
  cursor: pointer;
}
.img-list-right-arrow {
  font-size: 12px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f5f5fa;
  top: 160px;
  right: 0;
  z-index: 1;
  cursor: pointer;
}
.img-list-left-img {
  font-size: 12px;
}
.img-list-li {
  text-align: center;
  padding-bottom: 10px;
}
.img-list-li ul {
  display: inline-block;
  list-style: none;
}
.img-list-li ul li {
  font-size: 12px;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background-color: #e1e1eb;
  float: left;
  margin-right: 20px;
}
.img-list-li ul li.hover {
  background-color: #8992a0 !important;
}
.detail-name {
  font-weight: bold;
  color: #333;
  font-size: 16px;
  margin-bottom: 8px;
}
.detail-update {
  color: #666;
  font-size: 16px;
}
.detail-wrapper {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
  width: 96%;
  padding: 10px;
  height: 440px;
}
.detail-wrapper-type {
  height: 40px;
  line-height: 40px;
  border-bottom: 2px solid #e4e7ed;
}
.collapseType {
  margin-top: 10px;
  overflow-y: auto;
  height: 390px;
}
.collapseType-item {
  padding: 0px 10px;
  display: flex;
}
.collapseType-item .collapseType-item-left {
  width: 50%;
  text-align: right;
  font-size: 16px;
  line-height: 32px;
  color: #333;
}

.collapseType-item .collapseType-item-right {
  width: 50%;
  text-align: left;
  font-size: 13px;
  line-height: 32px;
  color: #666;
}
.typeItem > div {
  background-color: #f5f5fa;
}

.list {
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
}
.list-title {
  display: flex;
}
.list-title .list-title-left {
  width: 400px;
  text-align: left;
  height: 32px;
  line-height: 32px;
}
.list-title .list-title-left .searchContent {
  display: inline-block;
  margin-left: 30px;
}
.list-title .list-title-left .el-image {
  display: block;
  float: left;
  margin-top: 4px;
  margin-right: 6px;
}
.list-title .list-title-right {
  flex: 1;
  text-align: right;
}
.gjw-list {
  height: calc(100vh - 320px);
}
.gjw-list .gjw-list-list {
  height: calc(100% - 5px);
  overflow-y: auto;
  padding-top: 2px;
  background-color: #fff;
}
.gjw-list .gjw-list-list .gjw-list-item {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 10px;
  padding-top: 5px;
}
.gjw-list .gjw-list-list .gjw-list-item .item {
  margin-right: 10px;
  width: calc((100% - 50px) / 5);
  height: 240px;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-button {
  text-align: center;
  height: 32px;
  width: 100%;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-row {
  border-bottom: 1px solid #e0e0e0;
  height: 28px;
  line-height: 28px;
  color: #666;
  font-size: 14px;
  background-color: #f5f5fa;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-title {
  font-size: 14px;
  text-align: center;
  color: #333;
  line-height: 40px;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  padding: 0 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-img {
  height: 120px;
  margin: 10px;
  text-align: center;
  cursor: pointer;
}
.gjw-list .gjw-list-page {
  background-color: #e0e0e0;
  height: 40px;
  padding-top: 10px;
  text-align: right;
}
.tab-wrapper {
  display: flex; /* flex布局 */
  justify-content: flex-start; /* 左对齐 */
  flex-wrap: wrap; /* 换行 */
  padding: 20px;
  background-color: #fff;
}

.tab-item {
  margin-right: 20px; /* 每个元素右间距设置为20px */
  width: calc((100% - 80px) / 5);
  height: 110px;
  border-radius: 4px;
}
.l-img {
  width: 50%;
  float: left;
}
.l-border {
  border: 1px solid #fff;
  width: 66px;
  height: 54px;
  text-align: center;
  float: right;
  margin-top: 27px;
  margin-right: 20px;
  border-radius: 4px;
  padding-top: 4px;
}
.r-text {
  float: right;
  width: 50%;
}
.r-text .tab {
  font-size: 26px;
  color: #fff;
  margin-top: 25px;
}
.r-text .title {
  font-size: 18px;
  color: #fff;
  margin-top: 6px;
}
.zero {
  background-color: #49a0ff;
}
.one {
  background-color: #a6a0f5;
}
.two {
  background-color: #58b5ff;
}
.three {
  background-color: #4ec8d1;
}
.four {
  background-color: #fbac69;
}
.tab-item:nth-of-type(5n + 0) {
  margin-right: 0;
}
.noData {
  text-align: center;
  color: #999;
  height: calc(100% - 105px);
  padding-top: 102px;
  background-color: #fff;
}
</style>
